<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--    引入本地js文件使用-->
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <title>Title</title>
    <script type="text/javascript">
      $(function() {
          //利用id选择隐藏按钮, 然后绑定onclick鼠标单击事件
           $("#yincang").click(function(){
             //选中p标签, 隐藏
              //$("p").hide();

              //淡出
             //$("p").fadeOut();

             //滑出
             $("p").css("color", "red").slideUp();

           });

           //利用id选择显示按钮, 然后绑定鼠标onClick单击事件
          $("#xianshi").click(function() {
              //选中p标签, 显示
              //$("p").show();

              //淡入
             // $("p").fadeIn();

            //滑入
            $("p").css("color", "green").slideDown();
          });

          //选中显示隐藏切换按钮, 绑定鼠标单击事件
          $("#cut").click(function(){
            //选中p标签, 显示, 隐藏切换
              //$("p").toggle();

              //淡入淡出切换
            $("p").fadeToggle();
          });

        $("#gai").click(function(){
          //获取选中元素内部的所有内容, 包括标签和文本, 以及属性
          var p1 = $("#p1").html("<font color='red' size=\"3\">窗前明月光</font>");
          //获取选中元素内部的文本信息
          var p2 = $("#p2").text("xxxxxxx");
          alert(p1);
          alert(p2);
        });

        //将a标签里面跳转的地址改为京东
        $("#jump").click(function(){
            $("#a1").attr("href","http://www.jd.com");
        });


        //删除元素
        $("#del").click(function(){
          $("#div1").remove();
        });

      });
    </script>
</head>
<body>
  <input id="yincang" type="button" value="隐藏">
  <input id="xianshi" type="button" value="显示">
  <input id="cut" type="button" value="显示/隐藏">
  <input id="gai" type="button" value="更改诗句">
  <input id="jump" type="button" value="跳转到京东">
  <input id="del" type="button" value="删除元素">



  <a id="a1" href="http://www.baidu.com">跳转</a>
  <div id="div1">
    <p id="p1"><font size="3">窗前明月光</font></p>
    <p id="p2"><font size="3">疑是地上霜</font></p>
    <p id="p3"><font size="3">举头望明月</font></p>
    <p id="p4"><font size="3">低头思故乡</font></p>
  </div>
</body>
</html>